/*
 * @Author: luocaisen 
 * @Date: 2024-10-22 15:28:39 
 * @Last Modified by: luocaisen
 * @Last Modified time: 2024-10-22 23:02:54
 * @Description 会员激活
 */

<template>
	<view class="vip-activate-container">
		<u-popup
			:show="show"
			:safeAreaInsetBottom="false"
			mode="center"
			@close="close"
			@open="open"
		>
			<view class="pop-vip-box">
				<view class="text-info">
					<view class="text-title">会员特权</view>
					<view class="text-box">
						<view class="text-item">学生情绪变化数据</view>
						<view class="text-item">学生周报数据生成</view>
						<view class="text-item">普查筛查量表填写</view>
					</view>
				</view>
				<view class="btn-activate" @click="clickEvent"></view>
				<view class="btn-close" @click="close"></view>
			</view>
		</u-popup>
	</view>
</template>
 
<script>
export default {
	name: 'VIPActivate',
	options: {
		styleIsolation: 'shared', //解除样式隔离
	},
	data() {
		return {
			show: false,
		};
	},
	methods: {
		close() {
			this.show = false;
		},
		open() {
			this.show = true;
		},
		clickEvent() {
			this.$emit('active');
		},
	},
};
</script>
 
<style lang="scss" scoped>
.vip-activate-container {
}

.pop-vip-box {
	width: 700rpx;
	height: 816rpx;
	background-image: url('https://hengfengzhigao.cn/images/common/vip.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.text-info {
		font-size: 20rpx;
		line-height: 40rpx;
		color: #8f5937;
		text-align: center;
		margin-top: 354rpx;

		.text-title {
			font-size: 24rpx;
			line-height: 34rpx;
			font-weight: 500;
		}

		.text-box {
			margin: 38rpx auto 0;
			width: 200rpx;
			white-space: nowrap;
			overflow: hidden;

			.text-item {
				position: relative;
			}
			.text-item::before {
				content: '';
				position: absolute;
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: #8f5937;
				left: 0;
				top: 18rpx;
			}
		}
	}

	.btn-activate {
		width: 284rpx;
		height: 74rpx;
		margin: 90rpx auto 0;
		// background-color: #eb9c9c;
		border-radius: 54rpx;
	}

	.btn-close {
		width: 56rpx;
		height: 56rpx;
		margin: 60rpx auto 0;
		// background-color: rgb(71, 169, 227);
		border-radius: 50%;
	}
}

::v-deep .u-popup__content {
	background-color: transparent !important;
}
</style>